<template>
    <view :style="{ '--color': color }">
        <status-bar :title="title"></status-bar>
        <Search :placeTxt="placeTxt" :Val="query_text" @Search="searchData"></Search>
        <view class="TabBox">
            <u-tabs :list="listData" :lineColor="color" :current="current" :activeStyle="activeStyle" keyName="title" @click="click"></u-tabs>
        </view>

        <view class="Screen" v-if="labelData.length" @click="show = true">点击选择筛选条件</view>

        <view class="Wrapper">
            <view class="list" @click="$Means.Sublevel(item)" v-for="(item, index) in pageData" :key="index">
                <text class="title ellipsis_3">{{ item.title }}</text>
            </view>
        </view>

        <emptys v-if="!pageData.length" title="暂无相关内容"></emptys>

        <u-popup :show="show" @close="show = false" :round="10" closeable>
            <view class="u-popup">
                <view class="header">请选择</view>
                <view class="Box">
                    <view class="list" v-for="(item, index) in labelData" :key="index">
                        <text class="title">{{ item.title }}</text>
                        <view class="content">
                            <view class="Li" :class="{ liActive: sub.selected == 1 }" @click="changeLabel(sub, index)" v-for="(sub, sin) in item.list" :key="sin">{{ sub.title }}</view>
                        </view>
                    </view>
                </view>

                <view class="footer">
                    <view class="list reset" @click="Reset">重置</view>
                    <view class="list confrim" @click="Confrim">确定</view>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    import api from './api.js';
    import Search from '@/classification/components/Search.vue';
    export default {
        components: {
            Search
        },
        data() {
            return {
                placeTxt: '',
                title: '',
                pt: '5', // 1图片分类  2纯文字  3左右结构 4文章列表 5查询结果页 6详情页
                type: '5', // 1分类  2标签  3内容列表  4内容详情 5查询结果
                list_id: 0, // 37803
                label_id: 0, // 1342
                query_text: '',
                page: 1,
                limit: 10,
                pageData: [],
                getMore: true,
                listData: [],
                labelData: [],
                current: 0,
                show: false
            };
        },
        onLoad(opt) {
            if (opt.pt) this.pt = opt.pt;
            if (opt.type) this.type = opt.type;
            if (opt.list_id) this.list_id = opt.list_id;
            if (opt.label_id) this.label_id = opt.label_id;
            if (opt.val) this.query_text = opt.val;
            this.init();
        },
        methods: {
            async init() {
                let reuesetObj = {
                    pt: this.pt,
                    type: this.type,
                    list_id: this.list_id,
                    label_id: this.label_id,
                    page: this.page,
                    limit: this.limit,
                    query_text: this.query_text
                };
                const requsetResult = await api.dataQuery(reuesetObj);
                this.title = requsetResult.title;
                this.placeTxt = requsetResult.query_text;
                const result = requsetResult.list || [];
                const listData = requsetResult.listData || [];
                const labelData = requsetResult.labelData || [];

                if (!this.listData.length && listData) this.listData = listData;
                if (!this.labelData.length && labelData) this.labelData = labelData;

                this.page == 1 ? (this.pageData = result) : (this.pageData = [...this.pageData, ...result]);
                if (result.length < this.limit) this.getMore = false;
            },
            searchData(e) {
                this.query_text = e;
                this.page = 1;
                this.getMore = true;
                this.init();
            },
            click(e) {
                this.list_id = e.postArr.list_id;
                this.page = 1;
                this.getMore = true;
                this.current = e.index;
                this.init();
            },
            changeLabel(sub, Index) {
                this.labelData[Index].list.forEach((n) => {
                    if (n.id == sub.id) {
                        if (n.selected == 1) {
                            n.selected = 0;
                            this.label_id = this.labelData[0].postArr.label_id;
                        } else {
                            n.selected = 1;
                            this.label_id = n.postArr.label_id;
                            console.log(this.label_id, 'label_id');
                        }
                    } else {
                        n.selected = 0;
                    }
                });
            },
            Reset() {
                for (const item of this.labelData) {
                    for (const n of item.list) {
                        n.selected = 0;
                    }
                }
                this.label_id = this.labelData[0].postArr.label_id;
                this.Confrim();
            },
            Confrim() {
                this.page = 1;
                this.getMore = true;
                this.show = false;
                this.init();
            }
        },
        onReachBottom() {
            if (!this.getMore) return;
            this.page++;
            this.init();
        },
        computed: {
            ...mapState(['color']),
            activeStyle() {
                return {
                    color: this.color
                };
            }
        }
    };
</script>
<style lang="scss">
    page {
        background-color: $page;
        padding-bottom: 20rpx;
    }
</style>
<style lang="scss" scoped>
    .TabBox {
        width: 100%;
        height: 90rpx;
        background-color: #fff;
    }
    .Screen {
        width: 710rpx;
        height: 80rpx;
        background-color: var(--color);
        color: #fff;
        font-size: 28rpx;
        margin: 20rpx auto 0;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 40rpx;
    }
    .Wrapper {
        width: 710rpx;
        margin: 0 auto;
        .list {
            width: 100%;
            background-color: #fff;
            padding: 20rpx;
            border-radius: 10rpx;
            margin-top: 20rpx;
            .title {
                font-size: 30rpx;
                color: #676767;
            }
        }
    }
    .u-popup {
        width: 100%;
        // padding: 0 20rpx;
        display: flex;
        flex-direction: column;

        .header {
            width: 100%;
            height: 100rpx;
            background-color: $page;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 20rpx 20rpx 0 0;
            font-size: 32rpx;
            color: #000;
        }
        .Box {
            width: 100%;
            padding: 20rpx;
            .list {
                width: 100%;
                display: flex;
                flex-direction: column;
                .title {
                    color: #000;
                    font-size: 28rpx;
                    margin-top: 30rpx;
                }
                .content {
                    width: 100%;
                    margin-top: 20rpx;
                    display: grid;
                    grid-template-columns: repeat(4, 1fr);
                    gap: 20rpx;
                    .Li {
                        min-height: 50rpx;
                        padding: 20rpx;
                        border-radius: 40rpx;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        background-color: $page;
                        color: #999;
                        font-size: 24rpx;
                    }
                    .liActive {
                        background-color: var(--color);
                        color: #fff;
                    }
                }
            }
        }

        .footer {
            width: 100%;
            padding: 20rpx;
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin-top: 30rpx;
            .list {
                width: 300rpx;
                height: 80rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 28rpx;
                border-radius: 10rpx;
            }
            .reset {
                background-color: $page;
                color: #999;
            }
            .confrim {
                background-color: var(--color);
                color: #fff;
            }
        }
    }
</style>
